<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/xngzs/layui@2.5.5/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-carousel" id="test10" lay-anim="" lay-indicator="inside" lay-arrow="hover">
  <div carousel-item="">
          <div><a onclick="parent.location.href='https://ys.mihoyo.com/main/'"><img src="https://xngzs.coding.net/p/lunbo/d/lunbo/git/raw/master/yuanshen.png" width="320" height="120"></a></div>
    <div><a onclick="parent.location.href='https://www.dogedoge.com/'"><img src="https://xngzs.coding.net/p/lunbo/d/lunbo/git/raw/master/dogedoge.jpg" width="320" height="120"></a></div>
    <div><a onclick="parent.location.href='https://www.haoziyuan.club/567/'"><img src="https://xngzs.coding.net/p/lunbo/d/lunbo/git/raw/master/3.png" width="320" height="120"></a></div>

  </div>
</div> 
 
          
<script src="https://cdn.jsdelivr.net/gh/xngzs/layui@2.5.5/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
 
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '320'
    ,height: '120'
    ,interval: 10000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

</body>
</html>
